<script setup>
import { onMounted, ref } from 'vue'
const props = defineProps({
  car: {
    type: Object,
    default: () => {}
  },
  size: {
    type: String,
    default: 'default'
  },
  disable: {
    type: Boolean,
    default: false
  }
})
const isBan = ref('')
onMounted(() => (isBan.value = props.disable ? 'none' : ''))
</script>
<template>
  <RouterLink
    :class="size"
    :style="{ 'pointer-events': isBan }"
    :to="`/details/${car.id}`"
    class="cars-item"
  >
    <img :src="car.vehicleMarket.frontPic" alt="" />
    <p class="name">
      {{ car.name }} {{ car.version }} {{ car.emissionStandard }}
    </p>
    <p class="desc">
      {{ car.vehicleMarket.mileage }} / {{ car.registerDate }} /
      {{ car.vehicleMarket.city }}
    </p>
    <p class="price">&yen;{{ car.vehicleMarket.currentPrice }}</p>
  </RouterLink>
</template>
<style lang="scss" scoped>
.cars-item {
  display: block;
  transition: all 0.5s;
  text-align: center;

  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
  }

  img {
    object-fit: cover;
  }
}

.default {
  width: 225px;
  height: 275px;

  img {
    width: 100%;
    height: 180px;
  }

  .name {
    font-size: 14px;
  }

  .desc {
    color: #999;
    font-size: 13px;
  }

  .price {
    color: $priceColor;
    font-size: 20px;
  }

  p {
    padding: 7px 7px 0;
  }
}

.mini {
  width: 160px;
  height: 215px;

  img {
    width: 160px;
    height: 130px;

    border-radius: 5px;
  }

  .name {
    margin-top: 3px;
    font-size: 13px;
  }

  .desc {
    color: #999;
    font-size: 12px;
  }

  .price {
    color: $priceColor;
    font-size: 16px;
  }

  p {
    padding: 2px 3px;
  }
}

.mini-more {
  // height: 140px;
  border-radius: 5px;

  img {
    max-height: 100px;
    width: auto;
    border-radius: 5px;
  }

  .name {
    margin-top: 3px;
    font-size: 13px;
  }

  .desc {
    display: none;
  }

  .price {
    display: none;
  }

  p {
    padding: 2px 3px;
  }

  &:hover {
    transform: none;
    box-shadow: none;
  }
}
</style>
